<html>
<head>
  <script src="processing.min.js"></script>
</head>
<h1>Processing.js</h1>
<h2>Simple processing.js via JavaScript</h2>
<p>Clock</p>

<p><canvas id="canvas1" width="800" height="800"></canvas></p>

<script id="script1" type="text/processing" data-processing-target="canvas1">

// Simple way to attach js code to the canvas is by using a function
function sketchProc(processing) {
  // Override draw function, by default it will be called 60 times per second
  processing.draw = function() {
    // determine center and max clock arm length
    var centerX = processing.width / 2, centerY = processing.height / 2;
    var maxArmLength = Math.min(centerX, centerY);

    function drawArm(position, lengthScale, weight) {      
      processing.strokeWeight(weight);
      processing.line(centerX, centerY, 
        centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength,
        centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);
    }

    // erase background
    processing.background(224);

    var now = new Date();

    // Moving hours arm by small increments
    var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12;
    drawArm(hoursPosition, 0.5, 5);

    // Moving minutes arm by small increments
    var minutesPosition = (now.getMinutes() + now.getSeconds() / 60) / 60;
    drawArm(minutesPosition, 0.80, 3);

    // Moving hour arm by second increments
    var secondsPosition = now.getSeconds() / 60;
    drawArm(secondsPosition, 0.90, 1);
  };
  
}

var canvas = document.getElementById("canvas1");
// attaching the sketchProc function to the canvas
//var p = new Processing(canvas, sketchProc);



PImage img;



void setup() {

  size(800, 800);

  frameRate(3);

  img = loadImage("foo.png");

}



void draw() {

  loadPixels();
console.log("pixels",red(img.pixels[320400]));
  for (int x = 0; x < img.width; x++) {

    for (int y = 0; y < img.height; y++ ) {

      // Calculate the 1D location from a 2D grid

      int loc = x + y*img.width;

      // Get the R,G,B values from image

      float r,g,b;

      r = red (img.pixels[loc]);

      //g = green (img.pixels[loc]);

      //b = blue (img.pixels[loc]);

      // Calculate an amount to change brightness based on proximity to the mouse

      float maxdist = 255;//dist(0,0,width,height);

      float d = dist(x,y,mouseX,mouseY);

      float adjustbrightness = 25*(maxdist-d)/maxdist;

      r += adjustbrightness;

      //g += adjustbrightness;

      //b += adjustbrightness;

      // Constrain RGB to make sure they are within 0-255 color range

      r = constrain(r,0,255);

      //g = constrain(g,0,255);

      //b = constrain(b,0,255);

      // Make a new color and set pixel in the window

      //color c = color(r,g,b);

      color c = color(r);

      pixels[loc] = c;

    }

  }

  updatePixels();

}

// p.exit(); to detach it
</script>

<div style="height:0px;width:0px;overflow:hidden;"></div>